<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="~{common/header :: commonHead}"></head>
<META HTTP-EQUIV="Cache-Control" CONTENT= "no-cache, must-revalidate">
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>优惠券列表</h5>
                    <div class="ibox-tools">
                        <shiro:hasPermission name="add_coupon">
                            <a href="/coupon/add" title="添加"><i class="glyphicon glyphicon-plus-sign"></i></a>
                        </shiro:hasPermission>
                        <a href="javascript: window.location.href='/coupon/list';" title="刷新"><i
                                class="glyphicon glyphicon-repeat"></i></a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="">
                    </div>
                    <div id="editable_wrapper" class="dataTables_wrapper form-inline" role="grid">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_length" id="editable_length"><label>每页
                                    <select name="editable_length" aria-controls="editable" class="form-control input-sm" id="page_size_selector">
                                        <option th:selected="${pageObj.pageSize eq 5}" value="5">5</option>
                                        <option th:selected="${pageObj.pageSize eq 10}" value="10">10</option>
                                        <option th:selected="${pageObj.pageSize eq 25}" value="25">25</option>
                                        <option th:selected="${pageObj.pageSize eq 50}" value="50">50</option>
                                        <option th:selected="${pageObj.pageSize eq 100}" value="100">100</option>
                                    </select> 条记录</label>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" id="start_date" placeholder="开始时间" th:value="${pageObj.fromDate}">
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" id="end_date" placeholder="结束时间" th:value="${pageObj.toDate}">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group" style="float: right">
                                    <input th:value="${pageObj.keyword}" type="text" placeholder="请输入关键词" class="input-sm form-control" id="search_bar">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" id="search-btn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="datepicker datepicker-dropdown dropdown-menu datepicker-orient-left datepicker-orient-bottom" style="display: none; top: 901.2px; left: 264.8px; z-index: 10;"><div class="datepicker-days" style="display: block;"><table class=" table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">十一月 2014</th><th class="next" style="visibility: visible;">»</th></tr><tr><th class="dow">日</th><th class="dow">一</th><th class="dow">二</th><th class="dow">三</th><th class="dow">四</th><th class="dow">五</th><th class="dow">六</th></tr></thead><tbody><tr><td class="old day">26</td><td class="old day">27</td><td class="old day">28</td><td class="old day">29</td><td class="old day">30</td><td class="old day">31</td><td class="day">1</td></tr><tr><td class="day">2</td><td class="day">3</td><td class="day">4</td><td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td></tr><tr><td class="day">9</td><td class="day">10</td><td class="selected day">11</td><td class="range day">12</td><td class="range day">13</td><td class="range day">14</td><td class="range day">15</td></tr><tr><td class="range day">16</td><td class="active selected day">17</td><td class="day">18</td><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td></tr><tr><td class="day">23</td><td class="day">24</td><td class="day">25</td><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="day">29</td></tr><tr><td class="day">30</td><td class="new day">1</td><td class="new day">2</td><td class="new day">3</td><td class="new day">4</td><td class="new day">5</td><td class="new day">6</td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">今天</th></tr><tr><th colspan="7" class="clear" style="display: none;">清空</th></tr></tfoot></table></div><div class="datepicker-months" style="display: none;"><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">2014</th><th class="next" style="visibility: visible;">»</th></tr></thead><tbody><tr><td colspan="7"><span class="month">1</span><span class="month">2</span><span class="month">3</span><span class="month">4</span><span class="month">5</span><span class="month">6</span><span class="month">7</span><span class="month">8</span><span class="month">9</span><span class="month">10</span><span class="month active">11</span><span class="month">12</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">今天</th></tr><tr><th colspan="7" class="clear" style="display: none;">清空</th></tr></tfoot></table></div><div class="datepicker-years" style="display: none;"><table class="table-condensed"><thead><tr><th class="prev" style="visibility: visible;">«</th><th colspan="5" class="datepicker-switch">2010-2019</th><th class="next" style="visibility: visible;">»</th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year">2012</span><span class="year">2013</span><span class="year active">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year new">2020</span></td></tr></tbody><tfoot><tr><th colspan="7" class="today" style="display: none;">今天</th></tr><tr><th colspan="7" class="clear" style="display: none;">清空</th></tr></tfoot></table></div></div>
                        <table class="table table-striped table-bordered table-hover  dataTable" id="editable"
                               aria-describedby="editable_info">
                            <thead>
                            <tr role="row">
                                <th aria-label="logo" style="width: 6%;" >logo</th>
                                <th aria-label="券名称" style="width: 12%;" >券名称</th>
                                <th aria-label="简介" style="width: 20%;">简介</th>
                                <th aria-label="剩余库存" style="width: 5%;">剩余</th>
                                <th aria-label="库存总量" style="width: 5%;">总量</th>
                                <th aria-label="核销总量" style="width: 5%;">核销总量</th>
                                <th aria-label="核销比例" style="width: 5%;">核销比例</th>
                                <!--<th aria-label="积分价值" style="width: 8%;">积分价值</th>-->
                                <!--<th aria-label="价格" style="width: 5%;">价格</th>-->
                                <th aria-label="创建时间" style="width: 10%;">创建时间</th>
                                <th aria-label="优惠券有效期始" style="width: 10%;">优惠券有效期始</th>
                                <th aria-label="优惠券有效期止" style="width: 10%;">优惠券有效期止</th>
                                <th aria-label="操作" style="width: 10%;">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA odd" th:if="${#lists.isEmpty(pageObj.list)}">
                                <td colspan="11" style="text-align: center">
                                    没有数据o&gt;^&lt;o
                                </td>
                            </tr>
                            <tr class="gradeA odd" th:each="item : ${pageObj.list}">
                                <td><img th:src="${item.image}" th:width="50px"/> </td>
                                <td th:with="keyword=${pageObj.keyword},name=${item.name}" th:utext="${null == keyword ? name : #strings.replace(name,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:with="keyword=${pageObj.keyword},desc=${item.couponDesc}" th:utext="${null == keyword ? desc : #strings.replace(desc,keyword,'<span style= &quot;color: red;font-weight:bold&quot;>'+ keyword +'</span>')}"></td>
                                <td th:text="${item.sumType==0}? ${item.remainTotal} :'-'"></td>
                                <td th:text="${item.sumType==0}? ${item.sumTatal} :'-'"></td>
                                <td th:text="${item.cancelCount}"></td>
                                <td th:text="${item.cancelRatio}"></td>
                                <!--<td th:text="${item.integral}"></td>-->
                                <!--<td th:text="${item.price}"></td>-->
                                <td th:text="${item.createTime}"></td>
                                <td th:switch="${item.useTimeType}">
                                    <span th:case="1" th:text="${item.useTimeStart}"></span>
                                    <span th:case="2" th:text="券领取时"></span>
                                    <span th:case="3" th:text="券领取时"></span>
                                </td>
                                <td th:switch="${item.useTimeType}">
                                    <span th:case="1" th:text="${item.useTimeEnd}"></span>
                                    <span th:case="2" th:text="'领取后'+${item.useTimeHour}+'小时'"></span>
                                    <span th:case="3" th:text="领取当天"></span>
                                </td>
                                <td class="center">
                                    <shiro:hasPermission name="update_coupon_status">
                                        <button th:data="${item.status}" th:onclick="changeStatus([[${item.id}]],this);" id="changeStatus" th:class="'btn btn-xs ' + ${item.status==1?'btn-danger':'btn-primary'}" th:text="${item.status == 1 ?'下架':'上架'}"></button>
                                    </shiro:hasPermission>
                                    <shiro:hasPermission name="edit_coupon">
                                        <a th:disabled="${item.status == 1}" type="button" th:href="${item.status==1?'javascript:void(0);':'/coupon/edit?id='+item.id}" class="btn btn-primary btn-xs" title="编辑">编辑</a>
                                    </shiro:hasPermission>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-6" th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage}">
                                <div class="dataTables_info" role="alert" aria-live="polite" aria-relevant="all"
                                     th:text="${'显示 ' + (page * size + 1) + ' 到 ' + ((page+1) lt totalPage ? (size + page * size) : (total % size == 0 ? total : (total % size + size * page))) + ' 项，共 ' + total + ' 项'}">
                                </div>
                            </div>
                            <div class="col-sm-6" th:with="page=${pageObj.page},size=${pageObj.pageSize},total=${pageObj.total},totalPage=${pageObj.totalPage}">
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <ul class="pagination">
                                        <li th:class="${page==0} ? 'paginate_button previous disabled' : 'paginate_button previous'">
                                            <a th:href="${(pageObj.page==0) ? '#' : '/coupon/list?page='+ (pageObj.page)
                                             +'&pageSize='+pageObj.pageSize
                                             +'&keyword='+(null == pageObj.keyword ? '' : pageObj.keyword)
                                             +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                             +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}">上一页</a>
                                        </li>
                                        <li th:if="${pageObj.page >= 0 && pageObj.totalPage>0}" th:each="i:${#numbers.sequence(1,pageObj.totalPage)}"
                                            th:class="${i == pageObj.page+1 ? 'active' : ''}">
                                            <a th:href="${'/coupon/list?page=' + i
                                            +'&pageSize='+pageObj.pageSize
                                            +'&keyword='+ (null == pageObj.keyword ? '' : pageObj.keyword)
                                            +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                            +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}"
                                               th:text="${i}" ></a>
                                        </li>
                                        <li th:class="${pageObj.page+1==pageObj.totalPage || pageObj.totalPage<1}?'paginate_button next disabled' : 'paginate_button next'" >
                                            <a th:href="${(pageObj.page+1==pageObj.totalPage || pageObj.totalPage<1) ? '#' : '/coupon/list?page='+ (pageObj.page+2)
                                             +'&pageSize='+pageObj.pageSize
                                             +'&keyword='+ (null == pageObj.keyword ? '' : pageObj.keyword)
                                             +'&fromDate='+(null == pageObj.fromDate ? '' : pageObj.fromDate)
                                             +'&toDate='+(null == pageObj.toDate ? '' : pageObj.toDate)}">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    function changeStatus(id,e) {
        let status = $(e).attr("data");
        $.ajax({
            url: "/coupon/updateStatus",
            type: "get",
            data: {id:id,status:status},
            success:function (data) {
                if (data.resCode == 0) {
                    layer.msg("操作成功",{icon: 1,time: 1000,shade : [0.5 , '#000' , true]});
                    let changeSta = data.data;
                    if (changeSta == 0) {
                        $(e).removeClass("btn-danger");
                        $(e).addClass("btn-primary");
                        $(e).next().removeAttr("disabled");
                        $(e).next().attr("href","/coupon/edit?id="+id);
                        $(e).html("上架");
                    }
                    if (changeSta == 1) {
                        $(e).removeClass("btn-primary");
                        $(e).addClass("btn-danger");
                        $(e).next().attr("disabled","disabled");
                        $(e).next().attr("href","javascript:void(0);");
                        $(e).html("下架");
                    }
                    $(e).attr("data",changeSta);
                    window.location.reload();
                } else {
                    layer.msg(data.resMsg,{icon: 1,time: 1000,shade : [0.5 , '#000' , true]});
                }
            }
        });
    }
    $("#page_size_selector").change(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let selected = $(this).val();
        window.location.href = initUrl(0,selected,'',fromDate,toDate);
    })
    $("#search_bar").keydown(function (e) {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        if (e.keyCode == 13) {
            let size = [[${pageObj.pageSize}]];
            let keyword = $(this).val();
            window.location.href = initUrl(0,size,keyword,fromDate,toDate);
        }
    })

    $("#search-btn").click(function () {
        let fromDate = $("#start_date").val();
        let toDate = $("#end_date").val();
        let size = [[${pageObj.pageSize}]];
        let keyword = $("#search_bar").val();
        window.location.href = initUrl(0,size,keyword,fromDate,toDate);
    })

    function initUrl(page,size,key,fromDate,toDate) {
        if (null == page) {
            page = 0;
        }
        return "/coupon/list?page="+ page +"&pageSize=" + size + "&keyword=" + key + "&fromDate=" + fromDate + "&toDate=" + toDate
    }
</script>
</html>